<template>
<div>
<!--   音乐进度条-->
    <div class="minplay">
      <div>{{dtiem}}</div>
      <mu-slider style="margin: 0 20px" :display-value="false" @change="setchange"  ref="slider" :value="size"  :step="1" :max="max"/>
      <div>{{ztiem}}</div>
    </div>
  <!-- 音乐播放按钮 -->
    <div class="musicbtn">
      <div ref="text" @click="setwhch">顺序播放</div>
      <div @click="setmuisc(-1)" >上一首</div>
      <div ref="play" @click="setplay">播发</div>
      <div @click="setmuisc(1)">下一首</div>
    </div>
</div>
</template>

<script>
import Http from "../api/http";
export default {
  name: "cart",
  data(){
    return{
         num:0,
    }
  },
  created() {
    this.$store.commit('setId',this.$route.query.id)
    this.$store.commit('setmuiscID',this.$route.query.index)
  },
  methods:{
    setwhch(){
      this.num++;
      if(this.num>1){
        this.num=0;
      }
      if(this.num==0) {
        //顺序播放
        this.$refs.text.innerHTML = '顺序播放'
        this.$store.commit('settextnum',this.num)
      }else {
        //单曲循环
        this.$refs.text.innerHTML='单曲循环'
        this.$store.commit('settextnum',this.num)
      }
    },
    //切换音乐
    setmuisc(num){
     this.$store.commit('setindex',num)
    },
    //播放音乐
    setplay(){
      if(this.audio.duration>0){
        if(this.audio.paused){
          this.audio.play();
          this.$store.commit('setflag',false)
          this.$refs.play.innerHTML='暂停'
        }else {
          this.audio.pause();
          this.$store.commit('setflag',true)
          this.$refs.play.innerHTML='播放'
        }
      }
    },
    //滑动模块状态修改播放进度
    setchange(value){
      this.audio.currentTime=value;
      this.$refs.play.innerHTML='暂停'
      this.audio.play()
    },
    //获取歌词
    getmuiscstr(){
      Http.get(`/lyric?id=1911907722`).then(res=>{
        let reg = /\[\d{2}:\d{2}\.\d{2,3}\]/
        let timeArr = res.data.lrc.lyric
        var strList=timeArr.split('\n')
        var lrctiemList=[]
        for(var i=0;i<strList.length;i++){
          var date=strList[i].match(reg);
          if(date!==null){
            var lrc=strList[i].replace(reg,'')
            var tiemstr=date[0]
            if(tiemstr!==null){
              var tiemlist=tiemstr.slice(1,-1).split(':')
              var time=parseFloat(tiemlist[0]*60)+parseFloat(tiemlist[1])
              lrctiemList.push([time,lrc])
            }
          }
        }
      });
    },
    // 监听音乐播放
    setnuiscstr(){
      this.audio.addEventListener('ended',()=>{
        if(this.textnum==0){
          this.$store.commit('setindex',1)
        }else {
          this.audio.currentTime=0;
          this.audio.play();
        }
      })
    }
  },
  mounted() {
    //获取歌词
    this.getmuiscstr();
    this.setnuiscstr();
  },
  computed:{
    index(){
      return this.$store.getters.getindex
    },
    bannerList(){
      return this.$store.getters.getbannerList
    },
    Id(){
      return this.$store.getters.getid
    },
    dtiem(){
      return this.$store.getters.getdtiem
    },
    ztiem(){
      return this.$store.getters.getztiem
    },
    size(){
      return this.$store.getters.getsize
    },
    max(){
      return this.$store.getters.getmax
    },
    audio(){
      return this.$store.getters.getaudio
    },
    textnum(){
      return this.$store.getters.gettextnum
    }
  }
}
</script>

<style scoped lang="less">
.navtbar{display: flex;justify-content: space-around;text-align: center;font-size:14px;color: white}
.navtber-item{display: flex;flex-direction: column;justify-content:start;background:red;img{width: 100%}}
.mu-carousel{
  height: 161px;
  img{width: 100%}
}
.minplay{
  display: flex;justify-content: space-between;
  box-sizing: border-box;
  text-align: center;
}
.musicbtn{display:flex;justify-content: space-around;
  background: red;height: 48px;text-align: center;line-height: 48px;position:fixed;bottom: 0;width: 100%}
</style>